<template>
	<scroll-view scroll-y class="content" @scrolltolower="nextPage">
		<usetopcard :data="topcarddata"></usetopcard>
		<historycard v-for="use in historydata" :history="use"></historycard>

		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
	</scroll-view>
</template>

<script>
	import {
		getUserConsumptionLog
	} from '../../API/my.js'
	import usetopcard from '../../pages/my/components/usetopcard.vue'
	import historycard from './components/historycard.vue'
	import userStore from '../../utils/userStore.js'
	export default {
		components: {
			usetopcard,
			historycard
		},
		data() {
			return {
				historydata: [],
				page: 1,
				pageSize: 10,
				last_page: 0,
				topcarddata: [{
					num: parseInt(userStore.get().total_money) || 0,
					numcolor: '#609AF2',
					title: '剩余次数',
					desc: userStore.get().vip_exp_at || ''
				}, {
					num: parseInt(userStore.get().total_consumption) || 0,
					numcolor: '#F7904C',
					title: '消费次数',
					desc: ''
				}, {
					num: parseInt(userStore.get().total_income) || 0,
					numcolor: '#28C764',
					title: '增加次数',
					desc: ''
				}]
			}
		},
		async mounted() {
			this.topcarddata = [{
				num: parseInt(userStore.get().total_money) || 0,
				numcolor: '#609AF2',
				title: '剩余次数',
				desc: userStore.get().vip_exp_at || ''
			}, {
				num: parseInt(userStore.get().total_consumption) || 0,
				numcolor: '#F7904C',
				title: '消费次数',
				desc: ''
			}, {
				num: parseInt(userStore.get().total_income) || 0,
				numcolor: '#28C764',
				title: '增加次数',
				desc: ''
			}];
			let data = this.checkLogin() && await getUserConsumptionLog({
				page: this.page,
				pageSize: this.pageSize
			});
			if (data) {
				this.last_page = data.last_page;
				this.historydata = this.historydata.concat(data.data);
			}

		},
		methods: {

			async nextPage() {
				if (this.last_page == this.page)
					return;
				this.page++;
				let data = await getUserConsumptionLog({
					page: this.page,
					pageSize: this.pageSize
				});
				if (data) {
					this.last_page = data.last_page;
					this.historydata = this.historydata.concat(data.data);
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF);
		height: 100vh ;
		padding-top: 2upx;
	}
</style>